<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    {% include "head.html" %}
</head>

<script>
    window.onload = function () {
        prettyPrint();
        window.editor = ace.edit("editor");
        window.editor.setTheme("ace/theme/twilight");
        var pythonMode = require("ace/mode/python").Mode;
        window.editor.getSession().setMode(new pythonMode());
        window.editor.getSession().setValue("{{ template_code|escapejs }}");
    };

    function runProgram() {
        var program = window.editor.getSession().getValue();
        shell.onRunKeyClick(program);
    }

    function submitProgram() {
        $('#submitProgramButton').attr("disabled", "disabled");
        var program = window.editor.getSession().getValue()
        shell.onSubmitKeyClick(program)
    }

    function clearOutput() {
        var output = document.getElementById('output');
        output.value = '';
    }

    $(document).ready(function() {
        $('.accordion').accordion({
            collapsible: true,
            active: false
        });

        $(':button').button();
    })
</script>

<body>

{% include "user.html" %}

<div id="content">
    {% include "challenge.html" %}

    <div style="width:45%; float:left; margin-top: 30px;">
        <form id="answerForm" action="shell.runProgram" method="get">
            <div id="editorContainer" style="position: relative; width: 500px; height: 300px;">
                <div id="editor" style="width: 500px; height: 300px;">some text</div>
            </div>
            <br/>
            <input type="hidden" name="challenge_key" id = "challenge_key" value="{{ challenge_key }}" />
            <div id="console" class="accordion" style="width: 500px; margin-top:20px;">
                <h3><a href="#">Python Console</a></h3>
                <div>
                    <textarea id="output" rows="10" readonly="readonly">
                    </textarea>
                    <br/>
                    <button type="button" onclick="clearOutput()">Clear Console</button>
                    <button type="button" onclick="runProgram()">Run</button>
                </div>
            </div>
            <br/>
            <button type="button" id = "submitProgramButton" onclick="submitProgram()">Submit Solution</button>
        </form>

        <p/>
    </div>

    <div style="width:45%; float:left">
        {% if submission %}
            <h3> Your Current Submission: </h3>
            <pre class="prettyprint">
{{ submission.content }}
            </pre>
            <h4>Submission score: {{ submission.vote_average|floatformat:"-2"}} based on votes by {{ submission.vote_count }} Jeeqsers</h4>
        {% else %}
            <p> No submission found!</p>
        {% endif %}
    </div>

    <div id="recent-attempts" class="accordion" style="width:45%; float:left">
        <h3><a href="#">Feedbacks</a></h3>
        <div>
            {% if feedbacks|length > 0 %}
                {% for feedback in feedbacks %}
                    <p>vote: {{ feedback.vote }}</p>
                    <p>{{ feedback.content }}</p>
                    <p>submitted by {{ feedback.author.username }}</p>
                    <hr/>
                {% endfor %}
            {% endif %}
        </div>
        <h3><a href="#">Your Recent Attempts</a></h3>
        <div>
            {% if jeeqser %}
                {% for attempt in attempts %}
                    <p> Attempted at: {{ attempt.date }}</p>
                    <pre class="prettyprint">
    {{ attempt.content }}
                    </pre>
                    <hr/>
                {% endfor %}
            {% endif %}
        </div>
    </div>
</div>

<script type="text/javascript">
    document.getElementById('editor').focus();
</script>

</body>
</html>

